<template>
  <div class="dashboard-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h1>全景式民生智慧社区</h1>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧栏 -->
      <div class="left-column">
        <!-- 商品兑换 -->
        <div class="card exchange-card">
          <div ref="exchangeChart" class="chart"></div>
        </div>

        <!-- 公告栏 -->
        <div class="card announcement">
          <div class="card-header">
            <i class="icon-notice"></i>
            <h3>最新公告</h3>
          </div>
          <ul>
            <li v-for="(item, index) in notices" :key="index">
              <span class="tag">NEW</span>
              {{ item }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 中间地图 -->
      <div class="center-map">
        <div ref="mapChart" class="chart"></div>
      </div>

      <!-- 右侧栏 -->
      <div class="right-column">
        <!-- 反馈统计 -->
        <div class="card feedback-card">
          <div ref="feedbackChart" class="chart"></div>
        </div>

        <!-- 关键词云 -->
        <div class="card wordcloud-card">
          <div ref="wordChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud'; // 引入词云扩展
import config from './config.json';
// 蓝色主题配色
const themeColors = {
  primary: '#1890ff',
  secondary: '#13c2c2',
  gradient: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#1890ff' },
    { offset: 1, color: '#0050b3' }
  ])
};

export default {
  data() {
    return {
      notices: [
        '7月15日进行消防演练',
        '垃圾分类新规实施通知',
        '地下车库充电桩安装进度公示',
        '物业费缴纳方式变更提醒'
      ]
    }
  },
  mounted() {
    this.initExchangeChart();
    this.loadMapData().then(() => {
      this.initMapChart();
    });
    this.initFeedbackChart();
    this.initWordChart();
  },
  methods: {
    // 初始化商品兑换图表
    initExchangeChart() {
      const chart = echarts.init(this.$refs.exchangeChart);
      chart.setOption({
        title: {
          text: '商品兑换统计',
          left: 'center',
          textStyle: { color: '#fff' }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          textStyle: { color: '#fff' }
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          itemStyle: {
            borderRadius: 10,
            borderColor: '#001529',
            borderWidth: 2
          },
          label: { color: '#fff' },
          data: [
            { value: 335, name: '米面粮油', itemStyle: { color: themeColors.primary } },
            { value: 310, name: '清洁用品', itemStyle: { color: '#13c2c2' } },
            { value: 234, name: '小家电', itemStyle: { color: '#722ed1' } },
            { value: 135, name: '其他', itemStyle: { color: '#eb2f96' } }
          ]
        }],
        backgroundColor: 'rgba(0,33,65,0.8)'
      });
    },

    // 加载并注册地图数据

    // loadMapData() {
    //   return fetch('./community.geojson') // 假设你将 community.geojson 放在 public/map/ 目录下
    //     .then(response => response.json())
    //     .then(data => {
    //       echarts.registerMap('community', data); // 注册地图
    //     })
    //     .catch(error => console.error('Error loading map data:', error));
    // },
    // 初始化地图新版
    // loadMapData() {
    //   return fetch('./ningxia.geojson') // 确保路径正确
    //     .then(response => response.json())
    //     .then(data => {
    //       alert('地图数据加载成功');
    //       console.log('Map data loaded:', data); // 打印数据以确认加载成功
    //       echarts.registerMap('ningxia', data);
    //     })
    //     .catch(error => console.error('Error loading map data:', error));
    // },
    loadMapData() {
      // const mapdata=process.env.REACT_APP_MAP_DATA_URL
      return fetch(config.mapDataUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error('网络响应异常');
          }
          return response.json();
        })
        .then(data => {
          console.log('地图数据加载成功:', data);
          echarts.registerMap('ningxia', data);
        })
        .catch(error => {
          console.error('地图加载失败:', error);
          // 可以在这里添加错误处理逻辑
        });
    },
    // 初始化地图
    // initMapChart() {
    //   const chart = echarts.init(this.$refs.mapChart);
    //   chart.setOption({
    //     title: {
    //       text: '社区平面图',
    //       left: 'center',
    //       textStyle: { color: '#fff' }
    //     },
    //     geo: {
    //       map: 'ningxia', // 使用已注册的地图
    //       roam: true,
    //       itemStyle: {
    //         areaColor: '#08203d',
    //         borderColor: '#1890ff'
    //       },
    //       emphasis: {
    //         areaColor: themeColors.gradient
    //       }
    //     },
    //     backgroundColor: 'rgba(0,33,65,0.8)'
    //   });
    // },
    //原始
    // initMapChart() {
    //   const chart = echarts.init(this.$refs.mapChart);
    //   chart.setOption({
    //     title: {
    //       text: '宁夏地图',
    //       left: 'center',
    //       textStyle: { color: '#fff' }
    //     },
    //     geo: {
    //       map: 'ningxia',
    //       roam: true,
    //       itemStyle: {
    //         areaColor: '#08203d',
    //         borderColor: '#1890ff'
    //       },
    //       emphasis: {
    //         areaColor: themeColors.gradient
    //       }
    //     },
    //     backgroundColor: 'rgba(0,33,65,0.8)'
    //   });
    // },
    // 保持地图初始化方法不变
    initMapChart() {
      const chart = echarts.init(this.$refs.mapChart);
      chart.setOption({
        title: {
          text: '宁夏地图',
          left: 'center',
          textStyle: { color: '#fff' }
        },
        geo: {
          map: 'ningxia',
          roam: true,
          itemStyle: {
            areaColor: '#08203d',
            borderColor: '#1890ff'
          },
          emphasis: {
            areaColor: themeColors.gradient
          }
        },
        backgroundColor: 'rgba(0,33,65,0.8)'
      });
    },
    // 初始化反馈统计
    initFeedbackChart() {
      const chart = echarts.init(this.$refs.feedbackChart);
      chart.setOption({
        title: {
          text: '问题处理统计',
          left: 'center',
          textStyle: { color: '#fff' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#fff' }
        },
        series: [{
          name: '反馈量',
          type: 'bar',
          itemStyle: { color: themeColors.gradient },
          data: [12, 19, 23, 17, 25, 30, 28]
        }, {
          name: '处理量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: { color: '#13c2c2' },
          lineStyle: { width: 3 },
          data: [10, 15, 20, 16, 22, 26, 25]
        }],
        grid: { top: '20%', bottom: '15%' },
        backgroundColor: 'rgba(0,33,65,0.8)'
      });
    },

    // 初始化关键词云
    initWordChart() {
      const chart = echarts.init(this.$refs.wordChart);
      chart.setOption({
        title: {
          text: '高频问题关键词',
          left: 'center',
          textStyle: { color: '#fff' }
        },
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          sizeRange: [20, 60],
          rotationRange: [-45, 45],
          textStyle: {
            color: () =>
              ['#1890ff', '#13c2c2', '#722ed1', '#eb2f96'][
                Math.floor(Math.random() * 4)
                ]
          },
          data: [
            { name: '停车管理', value: 100 },
            { name: '垃圾分类', value: 85 },
            { name: '设备维修', value: 75 },
            { name: '噪音问题', value: 65 },
            { name: '消防安全', value: 55 },
            { name: '清洁服务', value: 45 }
          ]
        }],
        backgroundColor: 'rgba(0,33,65,0.8)'
      });
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  background: #000d18;
  min-height: 100vh;
  padding: 20px;
  color: white;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.5em;
  background: linear-gradient(to right, #1890ff, #13c2c2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-content {
  display: flex;
  gap: 20px;
}

.left-column, .right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-map {
  flex: 2;
  min-height: 600px;
}

.card {
  background: rgba(0, 33, 65, 0.8);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 16px rgba(0, 56, 107, 0.3);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.announcement .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.announcement ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.announcement li {
  padding: 12px;
  margin: 8px 0;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 6px;
  position: relative;
}

.announcement li .tag {
  background: #ff4d4f;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8em;
  margin-right: 8px;
}

.chart {
  height: 300px;
}

.center-map .chart {
  height: 600px;
}
</style>
